import Vue from 'vue'
import Component from 'vue-class-component'
import '@/modules/photos/photoStyle.css'
import {Watch} from 'decorators'

@Component({
  props: {
    isLoadMore: Boolean
  }
})

export default class TableListClass extends Vue {
  isScrollBottom=false
  isTop=false
  pageHeight = 0

  @Watch('isLoadMore', {immediate: true, deep: true})
  onIsLoadMoreChange (isLoadMore) {
    this.isScrollBottom = isLoadMore
  }

  updated () {
    const object = document.getElementById('tableContainView')
    object.addEventListener('scroll', this.handlerScroll)
    this.pageHeight = object.offsetHeight
  }

  handlerScroll() {
    const scrollHeight = document.getElementById('tableListView').offsetHeight
    const object = document.getElementById('tableContainView')
    var scrollTop = object.scrollTop

    var windowHeight = object.offsetHeight // 当前可见区域的大小

    if (scrollTop + windowHeight >= scrollHeight - 100) {
      // this.isScrollBottom = true
      // alert('123')
      this.$emit('loadMore')
    }
    if (scrollTop + windowHeight === this.pageHeight) {
      // this.$emit('refresh')
    }
  }
  render () {
    return (
      <div id='tableContainView' style='-webkit-overflow-scrolling: touch;width: 100%;overflow: auto;'>
        <div id='tableListView' style='padding:0;width:100%;float:left'>
          {this.$slots.tableListCell}
        </div>
        <p v-show={this.isScrollBottom} class="loading">
          <mt-spinner type="fading-circle"></mt-spinner>
          加载中...
        </p>
      </div>
    )
  }
}
